<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title>个人信息</title>
        <link rel="stylesheet" href="<c:url value="/static/wx/css/style.css"/>" />
        <script type="text/javascript" src="<c:url value="/static/wx/js/lib/rem.js"/>"></script>
    </head>
    <body class="befeff4">
        <div id="wrap">
            <div class="header_s mt10 h120 bf">
                <%-- <img class="header_img" src="<c:url value="/static/wx/img/people.png"/>" /> --%>
                <c:if test="${userVo.userImg == null }">
                    <img class="header_img" src="<c:url value="/static/wx/img/people.png"/>" />
                </c:if>
                <c:if test="${userVo.userImg != null }">
                    <img class="header_img" src="${userVo.userImg }">
                </c:if>
                <p class="wx-name f14 c666">${userVo.nickName }</p>
            </div>
            <div class="wrap_order">
                <div class="wrap_select">
                    <div class="wrap_name common_list mt10">
                        <div class="common boder-bottom relative">
                        <label>联系人</label><input id="name" type="text" placeholder="请输入联系姓名" value="${userVo.contacts }" />
                        </div>
                    </div>
                    <div class="wrap_tel common_list">
                        <div class="common boder-bottom relative">
                        <label>电话</label><input type="text" id="tel" maxlength="11" value="${userVo.telephone }" placeholder="请输入联系电话" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
    onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'0')}else{this.value=this.value.replace(/\D/g,'')}" />
                        </div>
                    </div>
                    <div class="wrap_area common_list">
                        <div class="common boder-bottom relative">
                        <label>所在地区</label>
                        <input id="area" type="text" placeholder="请选择所在区域"  disabled="disabled" value="${userVo.city } ${userVo.area }"/>
                        <i class="right_icon"></i>
                        </div>
                    </div>
                    <div class="wrap_location common_list">
                        <div class="common boder-bottom relative">
	                        <label>详细地址</label>
	                        <input id="location" type="text" id="keyword" placeholder="请输入详细地址" value="${userVo.address}" />
                        </div>
                    </div>
                    <!--<div class="wrap_num common_list">
                        <div class="common boder-bottom relative">
                        <label>门牌号</label><input type="text" placeholder="请输入门牌号" />
                        </div>
                    </div>-->
                </div>
            </div>

            <div class="wrap_btn mt110">
                <a href="javascript:void(0)" class="button" id="submit_btn">确认</a>
            </div>
        
          <!--地区弹窗开始-->
          	<div class="mask" id="mask_area">
			<div class="confirm" id="wrap_area">
				<div class="confirm_h"><span class="cancel fl">取消</span> 选择区及街道范围   <span class="sure fr">确定</span> </div>
				<!--<ul class="confirm_c fl city_ul">
					<li class="on">苏州市</li>
				</ul>-->
				<ul class="confirm_c fl area_ul wc50">
					<li class="area_li selected"><a>工业园区</a>
					<ul class="confirm_c fl tradingArea_ul wc50">
						<li>东环路</li>
						<li>独墅湖</li>
						<li>贵都</li>
						<li>湖东</li>
						<li>湖畔</li>
						<li>湖西</li>
						<li>跨塘</li>
						<li>玲珑</li>
						<li>娄葑</li>
						<li>青剑湖</li>
						<li>胜浦</li>
						<li>青剑湖</li>
						<li>师惠</li>
						<li>唯亭</li>
						<li>斜塘</li>
						<li>新城</li>
						<li>左岸</li>
					</ul>
					</li>
					<li class="area_li"><a>姑苏区</a>
						<ul class="confirm_c fl tradingArea_ul wc50">
							<li>白洋湾街道</li>
							<li>彩香街道</li>
							<li>沧浪新城</li>
							<li>城北街道</li>
							<li>观前街</li>
							<li>观前街道</li>
							<li>虎丘街道</li>
							<li>留园街道</li>
							<li>娄门街道</li>
							<li>南门街道</li>
							<li>平江路街道</li>
							<li>平江新城</li>
							<li>石路街道</li>
							<li>双塔街道</li>
							<li>苏锦街道</li>
							<li>桃花坞街道</li>
							<li>吴门桥街道</li>
							<li>友新街道</li>
							<li>胥江街道</li>
							<li>葑门街道</li>
						</ul>
					</li>	
					<li class="area_li"><a>吴中区</a>
					<ul class="confirm_c fl tradingArea_ul wc50">
						<li>长桥</li>	
						<li>城南</li>
						<li>东山</li>
						<li>东吴路</li>
						<li>独墅湖</li>
						<li>光福</li>
						<li>郭巷</li>
						<li>横泾</li>
						<li>开发区</li>
						<li>临湖</li>
						<li>龙西</li>
						<li>木渎</li>
						<li>石湖越溪</li>
						<li>苏苑</li>
						<li>太湖</li>
						<li>香山</li>
						<li>西山</li>
						<li>尹山湖</li>
						<li>越溪</li>
						<li>甪直</li>
						<li>胥口</li>
					</ul>
					</li>
					<li class="area_li"><a>吴江区</a>
						<ul class="confirm_c fl tradingArea_ul wc50">
							<li>滨湖新城</li>
							<li>城北</li>
							<li>城南</li>
							<li>城中</li>
							<li>汾湖</li>
							<li>横扇</li>
							<li>平望</li>
							<li>七都</li>
							<li>盛泽</li>
							<li>松陵</li>
							<li>桃源</li>
							<li>同里</li>
							<li>运东</li>
							<li>震泽</li>
						</ul>
					</li>
					<li class="area_li"><a>相城区</a>
						<ul class="confirm_c fl tradingArea_ul wc50">
							<li>北桥</li>
							<li>高铁新城</li>
							<li>黄桥</li>
							<li>黄埭</li>
							<li>活力岛</li>
							<li>开发区</li>
							<li>陆慕</li>
							<li>太平</li>
							<li>望亭</li>
							<li>渭塘</li>
							<li>相城大道</li>
							<li>阳澄湖</li>
							<li>元和</li>
							<li>蠡口</li>
						</ul>
					</li>
					<li class="area_li"><a>虎丘区</a>
						<ul class="confirm_c fl tradingArea_ul wc50">
							<li>东渚</li>
							<li>枫桥</li>
							<li>横塘</li>
							<li>狮山</li>
							<li>通安</li>
							<li>镇湖</li>
							<li>浒墅关</li>
						</ul>
					</li>
					<li class="area_li"><a>高新区</a>
						<ul class="confirm_c fl tradingArea_ul wc50">
							<li>长浒</li>
							<li>东渚</li>
							<li>枫桥</li>
							<li>横塘</li>
							<li>何山路</li>
							<li>科技城</li>
							<li>狮山</li>
							<li>通安</li>
							<li>阳山</li>
							<li>镇湖</li>
							<li>竹园路</li>
							<li>浒关</li>
							<li>浒墅关</li>
							<li>玉山</li>
						</ul>
					</li>
					<li class="area_li"><a>常熟市</a>
						<ul class="confirm_c fl tradingArea_ul wc50">
							<li>董浜</li>
							<li>古里</li>
							<li>海虞</li>
							<li>练塘</li>
							<li>梅李</li>
							<li>沙家浜</li>
							<li>新港</li>
							<li>辛庄</li>
							<li>虞山</li>
							<li>支塘</li>
						</ul>
					</li>
					<li class="area_li"><a>昆山市</a>
						<ul class="confirm_c fl tradingArea_ul wc50">
							<li>巴城</li>
							<li>淀山湖</li>
							<li>花桥</li>
							<li>锦溪</li>
							<li>陆家</li>
							<li>千灯</li>
							<li>玉山</li>
							<li>张浦</li>
							<li>周市</li>
							<li>周庄</li>
						</ul>
					</li>
					<li class="area_li"><a>张家港市</a>
						<ul class="confirm_c fl tradingArea_ul wc50">
							<li>大新</li>
							<li>凤凰</li>
							<li>锦丰</li>
							<li>金港</li>
							<li>乐余</li>
							<li>南丰</li>
							<li>塘桥</li>
							<li>杨舍</li>
						</ul>
					</li>
					<li class="area_li"><a>太仓市</a>
						<ul class="confirm_c fl tradingArea_ul wc50">
							<li>城厢</li>
							<li>浮桥</li>
							<li>陆渡</li>
							<li>沙溪</li>
							<li>双凤</li>
							<li>浏河</li>
							<li>璜泾</li>
						</ul>
					</li>
				</ul>
			</div>
			</div>
			<!--地区弹窗结束-->
			
            
            <div class="msg-error">
                <p class="f14"></p>
            </div>
            
            <!--下单成功提示弹窗开始-->
			<div class="msg-succ">
				<img src="<c:url value="/static/wx/img/succ_icon.png"/>" /> 
				<p class="mt10">信息修改成功</p>
			</div>
			<!--下单成功提示弹窗结束-->
        </div>
        
        <input type="hidden" id="userId"  value="${userVo.bId }"/>
        <script type="text/javascript" src="<c:url value="/static/wx/js/lib/jquery-3.3.1.min.js"/>" ></script>
        <script type="text/javascript">
        	var text_area;
			var text_tradingArea;
            
            $(document).ready(function(){
            	//区域高亮
				text_area = $(".area_ul li:first-child a").text();
				var area_ = $("#area").val();
				console.log("area_",area_);
				if(area_){
					var text_area = $("#area").val().split(" ")[0]; 
					var text_tradingArea = $("#area").val().split(" ")[1];
				
					$(".area_ul li.area_li a").each(function(){
						var that =  this;
						var area_li = $(that).text();
						if(area_li == text_area){
							$(".area_li").removeClass("selected");
							$(that).parent(".area_li").addClass("selected");
						}
					})
					
					$(".tradingArea_ul li").each(function(){
						var that = this;
						var tradingArea_li = $(that).text();
						if(tradingArea_li == text_tradingArea){
							$(that).addClass("on").siblings("li").removeClass("on");
						}
					})
				}
                //点击显示弹窗
                $(".wrap_area").on("click",function(){
                    $("#mask_area").show();
                })
                //点击蒙版关闭弹层
				$(".mask").on("click",function(){
					$(this).hide();
				})
				//阻止事件冒泡
				$(".confirm").on("click",function(e){
					var ev = e || event;
					ev.stopPropagation();
					return false;
				})
                
                $("span.sure").on("click",function(){
					var area_ = $("#area").val();
					console.log(text_tradingArea);
					if(text_area&&text_tradingArea){
						$(".wrap_area").find("input").val(text_area + " " + text_tradingArea);
						$("#mask_area").hide();
						/* $(".area_li").removeClass("selected"); 
						$(".tradingArea_ul li").removeClass("on"); 
						text_area = "";
						text_tradingArea = ""; */
					}else if(!text_tradingArea||text_tradingArea==" "|| !area){
						alert("街道必选");
					}
				})
				
                $("span.cancel").on("click",function(){
                    $("#mask_area").hide();
                })
                
                //	区域选择
				$(".area_ul").on("click", ".area_li", function(){
					$(".tradingArea_ul li").removeClass("on");
					text_tradingArea = "";
					$(".tradingArea_ul").hide();
					$(this).children(".tradingArea_ul").show();
					text_area = $(this).children("a").text();
					$(this).addClass("selected").siblings("li").removeClass("selected");
				})
				
				//	商圈选择
				$(".tradingArea_ul").on("click", "li", function(e){
					var ev = e || event;
					ev.stopPropagation();
					text_tradingArea = $(this).text();
					$(this).addClass("on").siblings("li").removeClass("on");
				})
                $("#submit_btn").on("click",function(){
                    //联系人姓名
                    var name_ = $("#name").val();
                    //联系人电话
                    var tel_ = $("#tel").val();
                    //区域
                    var area_ = $("#area").val();
                    var area_one = $("#area").val().split(" ")[0];
					var area_two = $("#area").val().split(" ")[1];
                    //详细地址
                    var location_ = $("#location").val();
                    var regMobile = /^1\d{10}$/;
                    var bool = true ;
                    
                    if(!name_){
                        alert("姓名不能为空")
                        bool = false ;
                    }
                    
                    if(!tel_){
                        alert("电话不能为空");
                        bool = false ;
                    }else if(!regMobile.test(tel_)){
                        alert("请填入有效电话号码");
                        bool = false ;
                    }
                    
                    if(!area_){
                        alert("区域不能为空");
                        bool = false ;
                    }
                    
                    if(!location_){
                        alert("详细地址不能为空");
                        bool = false ;
                    }
                    
                    var userId = $("#userId").val();
                    if(bool == true){
                    	 var f = arguments.callee, self = this;
     			        $(self).unbind('click', f);  
                    	$.ajax({
                            type: "post",
                            url: "<c:url value="/wx/toUpdateUser.do"/>",
                            data: {
                            	contacts : name_,
                            	telephone : tel_,
                            	city : area_one,
                            	area : area_two,
                                id : userId,
                                address : location_
                            },
                            cache: true, 
                            async:false, 
                            dataType: "json",
                            success: function(data){
                            	if (data.msg != "") {
                            		$(".msg-succ").show();
        							setTimeout(hideTips,2000);
                            	}
                            	 $(self).click(f);
                            }
                    	})
                    }
                })
            })
            function hideTips(){
				$(".msg-succ").hide();
		    }
        </script>
    </body>
</html>
